<template>
    <div class="step-peak-new-container-template">
        <div class="control-bar">
            <h3>Campaign / Create New Perk</h3>
            <div class="ope-area">
                <el-button type="danger" @click="cancelHandler" class="upper-class ope">Cancel</el-button>
                <el-button type="primary" @click="saveHandler" class="upper-class ope">Save Peak</el-button>
            </div>
        </div>
        <div class="container">

            <el-row class="form-area border-div">
                <el-row class="intro" style="padding-top: 26px;">
                    <h2>
                        Perk Details
                    </h2>
                    <p class="sub-header">
                        Perks are incentives offered to backers in exchange for their support. You may edit your perk
                        details until the perk is claimed.

                        Visit the Help Center to learn about different kinds of perks you can offer.
                    </p>

                </el-row>
            </el-row>
            <el-row class="form-area border-div">
                <el-row class="tip-area" style="padding-top: 26px;">
                    <div class="head">
                        <label>Visibility</label>
                    </div>
                    <div class="sub-title">
                        <label>You can choose to hide perks if you're not ready to show them on the campaign page or if you want to hide a perk that's on your campaign page. You can change the visibility at any time.</label>
                    </div>
                    <div class="tip-reaio">
                        <el-radio v-model="isVisible" label="1" border><span class="txt">Visible.</span> Show on campaign page.</el-radio>
                        <el-radio v-model="isVisible" label="2" border><span class="txt">Hidden.</span> Do not show on campaign page</el-radio>
                    </div>
                </el-row>

                <el-row class="tip-area" style="padding-top: 26px;">
                    <div class="head">
                        <label>Price</label>
                    </div>
                    <div class="sub-title">
                        <label>Set an amount that you want to collect from backers who claim this perk. This amount should represent how much you want to receive for all the items included in this perk.</label>
                    </div>
                    <div class="tip-input">
                        <el-input v-model="price">
                            <template slot="prepend">$</template>
                            <template slot="append">USD</template>
                        </el-input>
                    </div>
                </el-row>

                <el-row class="tip-area" style="padding-top: 26px;">
                    <div class="head">
                        <label>Retail Price</label>
                    </div>
                    <div class="sub-title">
                        <label>Set an amount that you want to collect from backers who claim this perk. This amount should represent how much you want to receive for all the items included in this perk.</label>
                    </div>
                    <div class="tip-input">
                        <el-input v-model="retailPrice">
                            <template slot="prepend">$</template>
                            <template slot="append">USD</template>
                        </el-input>
                    </div>
                </el-row>

                <el-row class="tip-area" style="padding-top: 26px;">
                    <div class="head">
                        <label>Title</label>
                    </div>
                    <div class="sub-title">
                        <label>The title for your perk is what will appear on your campaign page and throughout Indiegogo. Create a title that best describes the contents of what this perk is offering.</label>
                    </div>
                    <div class="tip-input">
                        <el-input v-model="title">
                        </el-input>
                    </div>
                </el-row>


                <el-row class="tip-area" style="padding-top: 26px;">
                    <div class="head">
                        <label>Duration</label>
                    </div>
                    <div class="sub-title">
                        <label>The Peak When To End.</label>
                    </div>
                    <div class="tip-input">
                        <el-date-picker
                                v-model="duration"
                                type="date"
                                placeholder="Duration">
                        </el-date-picker>
                    </div>
                </el-row>

                <el-row class="tip-area" style="padding-top: 26px;">
                    <div class="head">
                        <label>Description</label>
                    </div>
                    <div class="sub-title">
                        <label>Describe the details of this perk. Be creative, this is your opportunity to educate backers on what they will be receiving after they claim this perk.</label>
                    </div>
                    <div class="tip-input">
                        <el-input
                                type="description"
                                :autosize="{ minRows: 4, maxRows: 6}"
                                placeholder=""
                                v-model="description">
                        </el-input>
                    </div>
                </el-row>


                <el-row class="tip-area" style="padding-top: 26px;">
                    <div class="head">
                        <label>Perk Image</label>
                    </div>
                    <div class="sub-title">
                        <label>Upload an image that best represents this perk. This image will be displayed with the perk on the campaign page. 660x460 recommended resolution, 330x230 minimum resolution.</label>
                    </div>
                    <div class="tip-input">
                        <el-upload
                                class="avatar-uploader"
                                :action="uploadHost"
                                name="picture"
                                :show-file-list="false"
                                :with-credentials="true"
                                :headers="myHeaders"
                                :on-success="handleAvatarSuccess"
                                :before-upload="beforeAvatarUpload">
                            <!--<el-button size="small" type="primary">Upload</el-button>-->

                            <img v-if="peakImage" :src="peakImage" class="avatar">
                            <i v-else class="el-icon-plus avatar-uploader-icon"></i>

                        </el-upload>
                    </div>
                </el-row>




            </el-row>

        </div>

    </div> 
</template>

<script>
    import {mapState, mapMutations} from 'vuex'
    import Constant from '@/env'
    import {imgBaseUrl} from 'src/config/env'
    import {getImgPath} from 'src/components/common/mixin'
    export default {
        data() {
            return {
                imgBaseUrl: '',
                activeName: 'first',
                uploadHeaders: {},
                campaignList: [],
                price: '',
                retailPrice: '',
                title: '',
                description: '',
                peakImage: '',
                duration: '',
                isVisible: "1"
            }
        },
        methods: {
            initData() {

                this.formUserName = this.userName

                // 添加上传headers
                this.uploadHeaders["token"] = getToken()
                this.uploadHeaders["userId"] = this.userId


            },
            cancelHandler () {
                // 返回上一页
                this.$router.go(-1);
            },
            saveHandler () {
                // 保存peak

                var campaignPeak = {
                    userId: this.userId,
                    price: this.price,
                    title: this.title,
                    retailPrice: this.retailPrice,
                    description: this.description,
                    peakImage: this.peakImage,
                    isVisible: this.isVisible
                }


                this.$store.dispatch('createNewPeak', campaignPeak)

                this.$router.go(-1);


            },
            handleAvatarSuccess(res, file) {
                window.sessionStore.setItem("avatar", res.imageUrl)
                this.peakImage = res.imageUrl
                this.$store.dispatch('SET_AVATAR', URL.createObjectURL(file.raw))
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type === 'image/jpeg';
                const isLt2M = file.size / 1024 / 1024 < 5;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是 JPG 格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 5MB!');
                }
                return isJPG && isLt2M;
            },
        },
        computed: {
            ...mapState({
                'status': state => state.user.status,
                'userName': state => state.user.name,
                'userId': state => state.user.userId,
                'mobile': state => state.user.mobile,
                'avatar': state => state.user.avatar
            }),
            //后台会返回两种头像地址格式，分别处理
            imgpath: function () {
                let path;
                if (this.avatar.indexOf('/') !== -1) {
                    path = imgBaseUrl + this.avatar;
                } else {
                    path = this.getImgPath(this.avatar)
                }
                this.SAVE_AVANDER(path);
                return path;
            },
            myHeaders: function () {
                return this.uploadHeaders;
            },
            uploadHost() {
                return Constant.baseUrl + '/crowd-api/api/image/upload'
            }
        },
    }
</script>

<style lang="scss">
    .step-peak-new-container-template {
        .control-bar {
            display: flex;
            justify-content: space-between;
            height: 81px;
            border-bottom: 1px solid rgb(200, 200, 200);
            align-items: center;
            padding: 40px;
            h3 {
                color: #2a2a2a;
                font-weight: bold;
            }
            .upper-class {
                text-transform: uppercase;
            }
            .ope {
                margin: 0 6px;
            }
        }
        .container {
            margin-left: 26px;
            width: 950px;
            padding: 0 40px;

            .border-div {
                border-top: 1px solid #C8C8C8;
            }

            .intro {
                .sub-header {
                    ont-family: "Benton Sans", "Helvetica", "sans-serif";
                    font-size: 16px;
                    font-weight: normal;
                    letter-spacing: 0;
                    line-height: 24px;
                    margin-bottom: 10px;
                    max-width: 626px;
                }
            }

            .tip-area {
                .head {
                    font-weight: bold;
                    font-size: 18px;
                    padding: 16px 0px;
                }
                .sub-title {
                    color: #6a6a6a;
                    font-size: 14px;
                }
                .tip-reaio {
                    margin: 16px 0;
                    .txt {
                        font-weight: bold;
                    }
                }
                .tip-input {
                    margin: 16px 0;
                }
                .avatar {
                    width: 480px;
                    height: 360px;
                }

                .avatar-uploader-icon {
                    font-size: 28px;
                    color: #8c939d;
                    width: 178px;
                    height: 178px;
                    line-height: 178px;
                    text-align: center;
                }
            }
        }
    }
</style>